<template>
  <div id="info">
    <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="dataList.length == 0 ? '暂无数据' : '没有更多了'"
        @load="getDataList">
      <div class="three-part-main" v-for="(articles,index) in dataList" :key="index">
        <div class="three-part-title" @click="gotoPersonal(articles)">
        <div class="avatar" :style="{backgroundImage: `url(${articles.avatar ? store.state.imgUrl + articles.avatar : logo})`}"></div>
          <!-- <van-image :src="articles.avatar ? store.state.imgUrl + articles.avatar : logo" round/> -->
          <div class="info" @click="gotoPersonal(articles)">
            <div class="info-top">{{ articles.name }}</div>
            <div class="info-bottom"><span>{{ articles.convertTime }}</span></div>
          </div>
          <div class="gzbtn" v-if="articles.isAttention" @click="gotogz(articles.userId,index)">
            已关注
          </div>
          <div class="gzbtn nogz" v-if="!articles.isAttention" @click="gotogz(articles.userId,index)">
            关注
          </div>
        </div>
        <div class="desc">{{ articles.title }}</div>
        <div class="three-artile">
          <div class="three-artile-left">
            <div @click="handleArticle(articles.id)" class="left-t">{{ articles.description }}
            </div>
            <div>
              <div>{{ articles.commentNum }}评论</div>
              <img src="@/assets/remark/jb.png" @click="gotojb(articles)">
            </div>

          </div>
          <Report ref="report" v-if="jbvisible && articles.id === clickId" :type="type" @close="close"
                  :token="token"></Report>


          <div
              class="three-artile-right"
              :style="{backgroundImage: `url(${store.state.imgUrl + articles.thumbnail})`}"></div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import {contentSearchApi, addAuthorLikeApi} from '@/api/share.js'
import Report from "./report.vue";
import store from '@/store'

export default {
  components: {Report},
  props: {
    searchValue: {
      type: String,
      default: null
    },
    token: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      // threeUrl: require('@/assets/threeImage.png'),
      jbvisible: false,
      visible: false,
      commentType: 0,
      routerId: -3,
      dataList: [],
      store: store,
      loading: false,
      finished: false,
      current: 1,
      type: '',
      clickId: '',
      logo: require("@/assets/tx.png"),

    }
  },
  mounted() {
    console.log(this.token)
  },
  created() {

  },
  methods: {
    init() {
      this.dataList = []
      this.current = 1
      this.finished = false
    },
    handleBack() {
      this.$router.go(-1)
      // let data ={
      //     action:'back',
      //     param:{
      //       type:"backToRoot"
      //    }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(data))
    },
    gotogz(id, index) {
      let data = {
        id: id,
        token: this.token
      }
      addAuthorLikeApi(data).then((res) => {
        console.log(res)
        this.dataList[index].isAttention = !this.dataList[index].isAttention
        // this.getDataSearch()
      })
    },
    gotojb(item) {//举报
      this.jbvisible = true
      this.clickId = item.id
      this.type = 'content'
      // console.log(this.$refs)
      this.$nextTick(() => {
        this.$refs.report[0].init(item)
      })
    },
    handleArticle(id) {
      this.$router.push({
        path: '/articleDetail',
        query: {
          id: id
        }
      })
      // let data = {
      //   action: 'pushPage',
      //   param: {
      //     type: 'web',
      //     name:'/home/share/articleDetail',
      //     url: `${this.$store.state.linkUrl}/articleDetail?id=${id}&token=${this.token}`
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(data))
    },
    getDataList() {
      if (this.finished === false) {
        if (this.searchValue) {
          this.loading = true
          contentSearchApi({
            search: this.searchValue,
            commentType: this.commentType,
            routerId: this.routerId,
            current:this.current,
            size: 10,
          })
              .then((res) => {
                // this.loading = false;
                // if (res.data.records.length < 1) {
                //     this.finished = true;
                // } else {
                //     this.dataList.push(...res.data.records)
                // }
                if (res.data.records !== null) {
                  // const {records} = data
                  this.dataList.push(...res.data.records)
                  console.log('list', this.list)
                  // 3. 加载结束
                  this.loading = false
                  if (res.data.records.length >= 10) {
                    this.current += 1
                  } else {
                    this.finished = true
                  }
                  // if (records.length <= 0) {
                  //   this.finished = true
                  // } else {
                  //   this.finished = false
                  // }
                } else {
                  this.finished = true
                }
              })
        } else {
          this.dataList = []
          this.loading = false
          this.finished = true;
        }

      }

    },
    getDataSearch() {
      this.current = 1
      this.finished = false
      this.dataList = []
      this.getDataList()
    },
    close() {
      this.jbvisible = false
    },
     // 跳转到主页
    gotoPersonal(item) {
      if (item.isOwn == 0) {//跳转到自己的个人主页
        this.$router.push({path: '/personalPage',query:{}})
      }else{//跳转到别人主页的个人主页
        this.$router.push({path: '/visitPersonal',query:{obj:JSON.stringify(item)}})
      }
    }
  }
}
</script>

<style lang="less" scoped>
#info {
  .three-part-main {
    padding: 10px 10px;


    .three-part-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .avatar{
          border: 1px solid #ebeef5;
          background-size: 100%;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          opacity: 1;
          margin-right:5px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
      }
      > .van-image {
        width: 38px;
        height: 38px;
        margin-right: 8px;
      }

      .info {
        .info-top {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 23.17px;
          color: rgba(0, 0, 0, 1);
        }

        .info-bottom {
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(153, 153, 153, 1);
          text-align: left;
        }
      }

      .gzbtn {
        margin-left: auto;
        border: 1px solid #f0f0f0;
        width: 43.29px;
        height: 17.7px;
        opacity: 1;
        border-radius: 3px;
        background: rgba(204, 204, 204, 0);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 14.48px;
        color: rgba(0, 0, 0, 1);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .nogz {
        background: rgba(242, 150, 0, 1);
        color: #ffffff;
      }
    }

    .desc {
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.62px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
      padding-top: 10px;
    }

    .three-artile {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 5px;
      padding-bottom: 15px;
      border-bottom: 1px solid #f0f0f0;
      position: relative;

      .three-artile-left {
        width: 60%;
        height: 91px;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(166, 166, 166, 1);

        .left-t {
          height: 55px;
          display: -webkit-box;
          -webkit-line-clamp: 3; /* 设置最大行数 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word; /* 允许换行 */
          line-height: 1.5; /* 行高，可根据需要进行调整 */
        }

        :nth-child(1) {

          > img {
            width: 60%;
            height: 91px;
          }
        }

        :nth-child(2) {
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 11px;
            height: 11px;
            opacity: 1;
          }
        }

      }

      .three-artile-right {
        background-size: 100% 100%;
        width: 122px;
        height: 91px;
        opacity: 1;
        border-radius: 5px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }
    }
  }
}
</style>
